<template>
  <div class="page-project">
    <div class="page-search">
      <n-form label-placement="left" inline :label-width="80" :model="formValue">
        <n-form-item label="项目名称">
          <n-input v-model:value="formValue.projectName" placeholder="输入项目名称" />
        </n-form-item>
        <n-form-item>
          <n-button attr-type="button" type="primary" @click="handleSearchClick">搜索</n-button>
        </n-form-item>
      </n-form>
    </div>
    <n-data-table
      :columns="columns"
      :data="data"
      :max-height="500"
      :scroll-x="1800"
      virtual-scroll
    />
  </div>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import type { DataTableColumns } from 'naive-ui'
import { NButton } from 'naive-ui'
interface RowData {
  key: number
  name: string
  age: number
  address: string
}

const formValue = ref({
  projectName: ''
})

const columns: DataTableColumns<RowData> = [
  {
    type: 'selection',
    fixed: 'left'
  },
  {
    title: '项目名称',
    key: 'projectName',
    width: 200,
    fixed: 'left'
  },
  {
    title: '项目编号',
    key: 'projectNo',
    width: 100,
    fixed: 'left'
  },
  {
    title: '立项日期',
    key: 'projectProposalDate'
  },
  {
    title: '操作',
    width: 100,
    fixed: 'right',
    key: 'actions',
    render(_row: any) {
      return h(
        NButton,
        {
          strong: true,
          // tertiary: true,
          size: 'small',
          type: 'error'
          // onClick: () => play(row)
        },
        { default: () => '删除' }
      )
    }
  }
]

const data: any[] = Array.from({ length: 5000 }).map((_, index) => ({
  key: index,
  projectName: `project -- ${index}`,
  projectNo: `No-32`,
  projectProposalDate: `${new Date().getTime()}`
}))

function handleSearchClick() {
  console.log('搜索')
}
</script>
